<template>
  <!--若报must required an root element，可在vue可视化面板-左侧导航栏-配置-ESLint configuration - 右边规则中找到vue/valid-template-root将其关闭即可-->
  <!--以下组件都需要在element.js中引入并注册-->
  <el-container class="home-container">
    <!--头部区域-->
    <el-header class="home-header">
      <div>
        <img class="headerImg" src="../assets/image/heima.jpg" alt="黑马logo" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!--主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside :width="toggleWidth">
        <!--菜单折叠展开开关按钮-->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!--侧边栏菜单导航组件-->
        <!--active-text-color是点击展开的菜单的颜色-->
        <!--unique-opened打开一个菜单时是否关闭其他菜单-->
        <!--collapse是否折叠菜单导航-->
        <!--collapse-transition是否开启折叠动画-->
        <!--router是否开启vue路由模式，以index作为path进行当前页面路由的子路由进行跳转-->
        <!--default active当前激活的菜单项的index，这里由于使用index值作为path进行跳转，所以可直接使用当前路由path。其他情况可考虑将index存入sessionStorage中-->
        <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409eff"
          unique-opened
          :router="true"
          :default-active="this.$route.path"
        >
          <!--一级菜单-->
          <!--:index必须绑定的是字符串 当点击展开一个菜单时，所有与之index相同的菜单都会展开，所以要动态为每个菜单指定单独的index-->
          <el-submenu
            v-for="item in menuList"
            :index="'/' + item.path"
            :key="item.id"
            class="submenuValue"
          >
            <!--一级菜单模板区-->
            <template slot="title">
              <!--图标-->
              <i :class="iconObj[item.id]"></i>
              <!--文本-->
              <span>{{ item.authName }}</span>
            </template>
            <!--            二级菜单-->
            <el-menu-item
              v-for="childrenItem in item.children"
              :index="'/' + childrenItem.path"
              :key="childrenItem.id"
            >
              <!--二级菜单模板区-->
              <template slot="title">
                <!--图标-->
                <i class="el-icon-menu"></i>
                <!--文本-->
                <span>{{ childrenItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--右边内容-->
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      menuList: [],
      //  将图标类名绑定对应的菜单的ID
      iconObj: {
        125: "iconfont icon-quanxian",
        103: "iconfont icon-gongneng",
        101: "iconfont icon-xiangmu",
        102: "iconfont icon-renwuguanli",
        145: "iconfont icon-fabu"
      },
      isCollapse: false //  是否折叠菜单导航
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    logout() {
      /* 退出功能原理
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。
*  */
      window.sessionStorage.clear(); //  清空sessionStorage
      this.$router.push("/login"); //  跳转到登录页
    },
    //  获取所有的左侧菜单
    async getMenuList() {
      const { data: res } = await this.$http.get("menus");
      if (res.meta.status !== 200)
        return this.$message.error("获取菜单列表失败");
      this.menuList = res.data;
    },
    //  展开/隐藏菜单导航栏
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  },
  computed: {
    toggleWidth() {
      // 菜单导航折叠/展开时调整宽度
      if (this.isCollapse) {
        return "64px";
      } else {
        return "200px";
      }
    }
  }
};
</script>

<style lang="less" scoped>
//elementUI组件名即是类名,但修改大小时需要使用手动添加的类名
.el-header {
  background-color: #373d41;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.home-header {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  div {
    padding: 2px 0;
    font-size: 20px;
    height: 60px;
    display: flex;
    align-items: center;
    img {
      height: 100%;
      border-radius: 50%;
    }
    span {
      margin-left: 15px;
    }
  }
}

.el-aside {
  background-color: #333744;
  color: #333;
  text-align: center;
  line-height: 200px;
  //  此组件有条边框线，效果不好，需要重置
  .el-menu {
    border-right: none;
  }
  .submenuValue {
    text-align: left;
  }
  .toggle-button {
    color: #fff;
    background-color: #4a5064;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    letter-spacing: 0.2em;
    cursor: pointer; //  鼠标悬停在元素上时显示为手指
  }
}

.el-main {
  background-color: #eaedf1;
}

.home-container {
  height: 100%;
  width: 100%;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
